<template>
  <div id="ViewQuestionView">
    <!--    {{questionData}}-->
    <a-row :gutter="[24,24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="questionData" :title="questionData?.title">
              <a-descriptions title="判题条件" :column="{xs:1, md:2, lg:3}">
                <a-descriptions-item label="时间限制">
                  {{ questionData?.judgeConfig?.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ questionData?.judgeConfig?.memoryLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  {{ questionData?.judgeConfig?.stackLimit ?? 0 }}
                </a-descriptions-item>
              </a-descriptions>

              <!-- 展示代码显示-->
              <MdiViewer :value=" questionData?.content
              "/>

              <template #extra>
                <a-space wrap>
                  <a-tag v-for="(item,index) in questionData?.tags" :key="index" color="blue">
                    {{ item }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="评论" disabled></a-tab-pane>
          <a-tab-pane key="answer" title="答案">暂时无法查看答案</a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-select :style="{width:'320px'}" @change="selectedLanguage" v-model="language" placeholder="请选择编程语言"
                  default-input-value="java">
          <a-option>java</a-option>
          <a-option>cpp</a-option>
          <a-option>html</a-option>
          <a-option>golang</a-option>
        </a-select>
        <CodeEditor :value="code" :language="language" :handleChange="handleChangeCode"
                    :handleLanguage="selectedLanguage"/>
        <a-button type="primary" style="min-width: 200px;margin-top: 30px;" @click="submitQuestion">提交代码</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {QuestionControllerService} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import {useRouter} from "vue-router";
import {withDefaults, defineProps} from "vue";
import MdiViewer from "@/components/MdiViewer.vue";
import CodeEditor from "@/components/CodeEditor.vue";

interface Props {
  id: String
}

const prop = withDefaults(defineProps<Props>(), {
  id: () => ''
})
/**
 * d当前使用的编程语言
 */
let language = ref('java')
let code = ref('')
const router=useRouter();//路由管理器

/**
 * 根据id查询单个题目信息
 */
let questionData = ref();
const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(prop.id as any);
  if (res.code === 0) {
    questionData.value = await res.data
  } else {
    message.error(res.message as string)
  }

}
/**
 * 代码提交
 */
const submitQuestion = async () => {
  console.log(code.value)
  console.log(prop.id)
  console.log(language.value)
  let questionAdd = ref({});
  questionAdd = Object.assign(questionAdd, {
    code: code.value,
    questionId: prop.id,
    language: language.value
  })
  const res = await QuestionControllerService.doQuestionSubmitUsingPost(questionAdd as any)
  if (res.code === 0) {
    message.success("提交成功")
    await router.push({
      path: '/questionSubmitList'
    })

  } else {
    message.error(res.message)
  }
}
/**
 * 选择编程语言
 */
const selectedLanguage = (l: string) => {
  language.value = l;
}
/**
 * 动态改变代码的值
 */
const handleChangeCode = (v: string) => {
  code.value = v;
}

onMounted(() => {
  loadData();
})
</script>

<style scoped>
#ViewQuestionView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>